<template>
  <div class="booksNew">
    <h3>新书上市</h3>
    <div class="book" v-for="book in books" :key="book.id">
      <figure>
        <router-link :to="'/book/' + book.id">
          <img :src="book.imgUrl" />
          <figcaption>
            {{ book.title }}
          </figcaption>
        </router-link>
      </figure>
      <p>
        {{ book.price | factPrice(book.discount) | currency }}
        <span>{{ book.price | currency }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: [''],
  data() {
    return {
      books: []
    }
  },
  created() {
    this.axios
      .get('/book/new')
      .then((response) => {
        if (response.status === 200) {
          this.loading = false
          this.books = response.data
        }
      })
      .catch((error) => alert(error))
  }
}
</script>

<style scoped>
.booksNew {
  float: left;
}
.booksNew .book {
  display: inline-block;
  width: 19%;
  border-right: solid 1px #ccc;
  margin-left: 10px;
}
.booksNew a:hover {
  color: #ff0000;
}
.booksNew img {
  width: 120px;
  height: 100px;
}
.booksNew span {
  color: #cdcdcd;
  text-decoration: line-through;
}
</style>
